<template>
  <div>
    <el-form ref="searchKey"
             :inline="true"
             :model="searchKey"
             :show-message="false"
             :inline-message="true"
             >

       <el-form-item label="项目名称" prop="projectName" label-width="80px">
        <el-input size="small" v-model="searchKey.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>

      <el-form-item label="项目编号" prop="projectNo" label-width="80px">
        <el-input size="small" v-model="searchKey.projectNo" placeholder="请输入项目编号"></el-input>
      </el-form-item>

      <el-form-item label="合同编号" prop="contractNo" label-width="80px">
        <el-input size="small" v-model="searchKey.contractNo" placeholder="请输入合同编号"></el-input>
      </el-form-item>


      <!-- <el-form-item label="开票申请部门" prop="deptId" >
        <tree-select v-model="searchKey.deptId" :options="departmentAllListData" :normalizer="treeSelectProps"
                     placeholder="选择部门"
                     style="width: 200px" />
      </el-form-item>
      <el-form-item label="申请月份" prop="salaryMonth">
        <el-date-picker
          v-model="searchKey.salaryMonth"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择申请月份">
        </el-date-picker> -->
      </el-form-item>

     

      <!-- <el-form-item label="发放类型" prop="salaryType" >
        <el-select size="small" v-model="searchKey.salaryType" placeholder="请选择发放类型" >
          <el-option label="请选择" value=""></el-option>
          <el-option label="工资发放" :value="1"></el-option>
          <el-option label="工资补发" :value="2"></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'SalarySearch',
    mixins: [],
    components: {
      TreeSelect
    },
    data() {
      return {
        isShowFilter: false, // 是否显示搜索
        searchKey: {},
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: true
          }
        }
      }
    },
    props: {
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      departmentAllListData: {// 搜索参数
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      resetSearchData() { // 重置表单
        this.searchKey = {
          ...JSON.parse(JSON.stringify(this.initParams)),
          ...{
            pageSize: this.searchKey.pageSize
          }
        }
      },
      handleFilter: debounce(function() { // 查询，防抖
        this.searchKey.pageNum = 1
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleReset: debounce(function() { // 重置查询，防抖
        this.resetSearchData()
        this.$emit('on-init', this.searchKey)
      }, 300),
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },

    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
